<template>
  <div class="home">
    <!-- bg-img -->
    <Bg />
    <!-- form -->
    <van-form
      class="form"
      @submit="onSubmit"
    >
      <div class="list">
        <van-field
          v-model="userName"
          class="user"
          clearable
          center="true"
          input-align="left"
          label-class="label"
          label="姓名"
          placeholder="请输入姓名"
        />
        <span class="line"></span>
      </div>
      <div class="list list1">
        <van-field
          v-model="id"
          class="id"
          clearable
          label-class="label"
          label="身份证号"
          placeholder="请输入身份证号"
        />
        <span class="line"></span>
      </div>
      <div class="list list2">
        <van-field
          v-model="tel"
          class="tel"
          clearable
          label-class="label"
          label="手机号"
          placeholder="请输入国内手机号"
        />
        <span class="line"></span>
      </div>
      <div class="list list3">
        <van-field
          v-model="code"
          class="code"
          clearable
          label-class="label"
          label="动态号"
          placeholder="请输入动态码"
        />
        <span class="line"></span>
      </div>
      <div class="btn">
        <van-button
          class="btn_sub"
          color="#2683FA"
          text="立即注册"
          size="large"
          block
          native-type="submit"
        >立即注册</van-button>
      </div>
    </van-form>
    <!-- foot -->
    <div class="foot">
      <div>注册若出现问题，可联系客服热线</div>
      <div class="telephone">400-678-2050</div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { Form, Field, Button } from 'vant'
import Bg from '@/components/Bg.vue'
import 'vant/lib/index.css'
// import { Field } from 'vant'
export default {
  name: 'Home',
  components: {
    VanForm: Form,
    VanField: Field,
    VanButton: Button,
    Bg
  },
  data() {
    return {
      userName: '',
      id: '',
      tel: '',
      code: ''
    }
  },
  methods: {
    onSubmit() {
      console.log('------')
    }
  }
}
</script>
<style scoped>
/* form */
.form {
  width: 702px;
  height: 702px;
  background: #ffffff;
  position: absolute;
  z-index: 1999;
  left: 24px;
  top: 462px;
  border-radius: 10px;
  /* border: 1px solid red; */
}
.form .list {
  position: absolute;
  width: 622px;
  height: 80px;
  left: 42px;
  top: 64px;
  border: 2px solid #e5e5e5;
  font-size: 30px;
}
.form .user {
  font-size: 30px;
  padding-top: 26px;
  padding-left: 26px;
  color: red;
}
.form .id {
  font-size: 30px;
  padding-top: 26px;
  padding-left: 26px;
}
.form .tel {
  font-size: 30px;
  padding-top: 26px;
  padding-left: 26px;
}
.form .code {
  font-size: 30px;
  padding-top: 26px;
  padding-left: 26px;
}
.form .label {
  color: red;
}
.form .line {
  width: 2px;
  height: 36px;
  border-left: 1px solid #c1c1c1;
  box-sizing: content-box;
  position: absolute;
  left: 168px;
  top: 28px;
}
.form .list1 {
  top: 164px;
}
.form .list2 {
  top: 264px;
}
.form .list3 {
  top: 364px;
}
.form .btn {
  width: 622px;
  height: 80px;
  position: absolute;
  left: 42px;
  top: 518px;
}
.form .btn_sub {
  height: 80px;
  font-size: 30px;
}
/* foot */
.foot {
  width: 360px;
  height: 78px;
  position: absolute;
  left: 190px;
  top: 1434px;
  font-size: 24px;
  font-weight: Regular;
  line-height: 50px;
  color: #999999;
  text-align: center;
}
.foot .telephone {
  color: #2683fa;
}
</style>
